<template>
  <Modal title="合并手牌" :width="600" :show-confirm-button="false">
    <div class="merge-cards-modal">
      <div class="selected-cards-section">
        <h4>已选手牌</h4>
        <div class="selected-cards-grid">
          <div v-for="card in selectedCards" :key="card" class="selected-card">
            <span class="card-number">{{ card }}</span>
            <a-button type="text" size="small" @click="removeCard(card)">
              ×
            </a-button>
          </div>
        </div>
        <div class="card-count">手牌数: {{ selectedCards.length }}</div>
      </div>

      <div class="add-card-section">
        <label>手牌号:</label>
        <a-input
          v-model:value="newCardNumber"
          placeholder='点击"Enter"录入'
          @keyup.enter="addCard"
        />
      </div>

      <div class="modal-actions">
        <a-button type="primary" @click="handleConfirm">确定</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </div>
    </div>

  </Modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

defineOptions({
  name: 'MergeCardsModal',
});

interface Emits {
  (e: 'success'): void;
}

interface ModalPayload {
  cardNumbers?: string[];
}

const emit = defineEmits<Emits>();

const selectedCards = ref<string[]>([]);
const newCardNumber = ref('');

const addCard = () => {
  if (!newCardNumber.value.trim()) {
    message.warning('请输入手牌号');
    return;
  }

  if (selectedCards.value.includes(newCardNumber.value)) {
    message.warning('该手牌已选择');
    return;
  }

  selectedCards.value.push(newCardNumber.value);
  newCardNumber.value = '';
};

const removeCard = (cardNumber: string) => {
  const index = selectedCards.value.indexOf(cardNumber);
  if (index > -1) {
    selectedCards.value.splice(index, 1);
  }
};

const [Modal, modalApi] = useVbenModal({
  showCancelButton: false,
  showConfirmButton: false,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return;
    }
    const data = modalApi.getData<ModalPayload>();
    selectedCards.value = data?.cardNumbers || ['1001', '1002', '1003', '1004', '1005'];
    newCardNumber.value = '';
  },
});

const handleConfirm = () => {
  if (selectedCards.value.length < 2) {
    message.warning('请至少选择两个手牌进行合并');
    return;
  }

  message.success(`手牌合并成功，共 ${selectedCards.value.length} 个手牌`);
  emit('success');
  modalApi.close();
};

const handleCancel = () => {
  modalApi.close();
};
</script>

<style scoped>
.merge-cards-modal {
  padding: 20px 0;
}

.selected-cards-section {
  margin-bottom: 20px;
}

.selected-cards-section h4 {
  margin-bottom: 15px;
  color: #333;
}

.selected-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.selected-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 14px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 4px;
}

.card-number {
  font-weight: bold;
}

.card-count {
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

.add-card-section {
  margin-bottom: 20px;
}

.add-card-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}
</style>
